<template>
  <div class="read">
    <div class="close">
      <router-link to="/chengbao"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang">
    </div>
    <div class="shang1">
      <router-link v-show="up_link1" to="/chengbao/read3/read3up1"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang2">
      <router-link v-show="up_link1" to="/chengbao/read3/read3up2"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang3">
      <router-link v-show="up_link1" to="/chengbao/read3/read3up3"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="shang4">
      <router-link v-show="up_link1" to="/chengbao/read3/read3up4"><button class="btn_go"></button></router-link>
      <router-link v-show="up_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia">
    </div>
     <div class="xia1">
       <router-link v-show="down_link1" to="/chengbao/read3/read3xia1"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia2">
       <router-link v-show="down_link1" to="/chengbao/read3/read3xia2"><button class="btn_go"></button></router-link> 
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link>
    </div>
    <div class="xia3">
       <router-link v-show="down_link1" to="/chengbao/read3/read3xia3"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="xia4">
       <router-link v-show="down_link1" to="/chengbao/read3/read3xia4"><button class="btn_go"></button></router-link>
       <router-link v-show="down_link2" v-on:click.native="warntext" to="#"><button class="btn_go"></button></router-link> 
    </div>
    <div class="nav1">
      <router-link to="/chengbao/read1"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav2">
      <router-link to="/chengbao/read2"><button class="btn_go"></button></router-link>
    </div>
    <div class="nav3">
      <router-link to="/chengbao/read3"><button class="btn_go"></button></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'read',
  data () {
    return {
      up_link1: false,
      up_link2: true,
      down_link1: false,
      down_link2: true
    }
  },
  created () {
    console.log(this.$store.state.jurisdiction)
    if (this.$store.state.jurisdiction === 0) {
      alert('校验文件无效!')
    } else if (this.$store.state.jurisdiction === 1) {
      this.up_link1 = true
      this.up_link2 = false
    } else if (this.$store.state.jurisdiction === 2) {
      this.down_link1 = true
      this.down_link2 = false
    } else if (this.$store.state.jurisdiction === 3) {
      this.up_link1 = true
      this.up_link2 = false
      this.down_link1 = true
      this.down_link2 = false
    }
  },
  methods: {
    warntext: function () {
      alert('暂未开放！')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn_go{
  width:100%;
  height:100%;
  opacity: 0;
}
.read{
  background:url(../../assets/read/1.0/1-assets/bg_3.png) no-repeat;
  width:1280px;
  height:720px;
  position: relative;
  text-align: center;
  margin:0 auto;
}
.close{
  background:url(../../assets/read/1.0/3-assets/close.png) no-repeat;
  width:70px;
  height:70px;
  position: absolute;
  top:30px;
  right:30px;
}
.shang{
  background:url(../../assets/read/1.0/1-assets/shang.png) no-repeat;
  width:62px;
  height:62px;
  position: absolute;
  top:180px;
  left:90px;
}
.shang1{
  background:url(../../assets/read/1.0/1-assets/shang1.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:150px;
  left:210px;
}
.shang2{
  background:url(../../assets/read/1.0/1-assets/shang2.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:170px;
  left:415px;
}
.shang3{
  background:url(../../assets/read/1.0/1-assets/shang3.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:170px;
  left:700px;
}
.shang4{
  background:url(../../assets/read/1.0/1-assets/shang4.png) no-repeat;
  width:175px;
  height:115px;
  position: absolute;
  top:170px;
  left:950px;
}
.xia{
  background:url(../../assets/read/1.0/1-assets/xia.png) no-repeat;
  width:62px;
  height:62px;
  position: absolute;
  top:330px;
  left:90px;
}
.xia1{
  background:url(../../assets/read/1.0/1-assets/xia1.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:300px;
  left:260px;
}
.xia2{
  background:url(../../assets/read/1.0/1-assets/xia2.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:280px;
  left:480px;
}
.xia3{
  background:url(../../assets/read/1.0/1-assets/xia3.png) no-repeat;
  width:175px;
  height:118px;
  position: absolute;
  top:280px;
  left:760px;
}
.xia4{
  background:url(../../assets/read/1.0/1-assets/xia4.png) no-repeat;
  width:170px;
  height:112px;
  position: absolute;
  top:320px;
  left:1000px;
}
.nav1{
  background:url(../../assets/read/1.0/1-assets/grade1_on.png) no-repeat;
  width:190px;
  height:70px;
  position: absolute;
  bottom:5px;
  left:100px;
}
.nav2{
  background:url(../../assets/read/1.0/1-assets/grade2_on.png) no-repeat;
  width:190px;
  height:70px;
  position: absolute;
  bottom:5px;
  left:550px;
}
.nav3{
  background:url(../../assets/read/1.0/1-assets/grade3.png) no-repeat;
  width:190px;
  height:70px;
  position: absolute;
  bottom:5px;
  left:980px;
}
</style>
